{% extends 'template/jhTemplateV4.html'%}

{% block vueTemplate %}


<script id="app-template" type="text/html">
<div>
<v-app mobile-breakpoint="sm">
  <jh-menu />
  <v-main class="mt-15">
    <!-- 头部内容 >>>>>>>>>>>>> -->
    <div class="jh-page-second-bar px-8">
      <v-row>
        <v-col cols="12" xs="12" sm="12" md="4" xl="3">
          <div class="pt-3 text-h7 font-weight-bold">车辆发车/退车申请单
            <!-- 帮助页按钮 -->
            <v-icon @click="isHelpPageDrawerShown = true" color="success" small>mdi-help-circle-outline
            </v-icon>
          </div>
          <v-breadcrumbs class="pb-3 pt-0 pl-0" :items="breadcrumbs" divider="-"></v-breadcrumbs>
        </v-col>
        <!-- 搜索条件表单 >>>>>>>> -->
        <v-col cols="12" xs="12" sm="12" md="8" xl="9">
          <v-row class="jh-backend-form-container justify-end ma-0 py-1 pb-xs-2">
            <!-- 申请单状态 -->
            <v-col cols="12" md="3" class="pa-xs-0 pb-2 pl-1 pl-xs-1">
              <v-select clearable v-model="serverSearchInput.ticketStatus" color="success" prefix="状态：" class="jh-v-input bg-white" :items="constantObj.ticketStatus" dense filled single-line></v-select>
            </v-col>
            <v-col cols="12" xs="6" sm="6" md="4" xl="3" class="pa-xs-0 pb-2 pl-1 pl-xs-1">
              <v-select v-model="serverSearchInput.ticketType" color="success" prefix="申请类型：" class="jh-v-input bg-white" :items="constantObj.searchType" clearable dense filled single-line></v-select>
            </v-col>
            <v-btn class="jh-backend-search-btn elevation-0 ml-0 mt-3" color="success" small @click="doUiAction('getTableData')">
              查询
            </v-btn>
          </v-row>
        </v-col>
        <!-- <<<<<<<< 搜索条件表单 -->
      </v-row>
    </div>
    <!-- <<<<<<<<<<<<< 头部内容 -->

    <div class="jh-page-body-container px-8">
      <!-- 页面内容 >>>>>>>>>>>>> -->
      <v-card class="rounded-lg">
        <v-row class="ma-0 pa-4">
          <!-- 新增按钮 -->
          <v-btn color="success" class="elevation-0 mr-2" @click="doUiAction('handleCarRequest', { actionType: '处理' })" small>批量处理
          </v-btn>
          <v-spacer></v-spacer>
          <!-- 搜索过滤 -->
          <v-col cols="12" xs="8" sm="4" md="3" xl="2" class="pa-0">
            <v-text-field color="success" v-model="searchInput" prefix="搜索：" class="jh-v-input" dense filled single-line></v-text-field>
          </v-col>
        </v-row>
        <!-- 表格 -->
        <v-data-table
          :headers="headers"
          :items="tableData"
          :search="searchInput"
          :footer-props="{ itemsPerPageOptions: [20, 50, -1], itemsPerPageText: '每页', itemsPerPageAllText: '所有'}"
          :items-per-page="-1"
          mobile-breakpoint="0"
          :loading="isTableLoading"
          checkbox-color="success"
          :class="{'zebraLine': isTableZebraLineShown }"
          fixed-header
          class="jh-fixed-table-height elevation-0 mt-0 mb-xs-4"
          show-select item-key="ticketId" @item-selected="tableItemSelected" v-model="tableSelected" @toggle-select-all="tableToggleSelectAll">
          <template v-slot:item.operationAt="{ item }">{{item.operationAt | dateFormat }}</template>
          <!-- 表格操作按钮 -->
          <template v-slot:item.action="{ item }">
            <!-- <span role="button" class="success--text font-weight-medium font-size-2 mr-2" @click="doUiAction('startUpdateItem', item)">
              <v-icon size="16" class="success--text">mdi-note-edit-outline</v-icon>修改
            </span>
            <span role="button" class="success--text font-weight-medium font-size-2" @click="doUiAction('deleteItem', item)">
              <v-icon size="16" class="success--text">mdi-trash-can-outline</v-icon>删除
            </span> -->
            <span role="button" class="success--text font-weight-medium font-size-2 mr-2" @click="doUiAction('startCreateRepairItem', item)" v-if="item.ticketType ==='退车申请' && item.ticketStatus==='申请'">
              <v-icon size="16" class="success--text">mdi-car-wrench</v-icon>新增维修单
            </span>
            <span role="button" class="success--text font-weight-medium font-size-2 mr-2" @click="doUiAction('startCreateViolationItem', item)" v-if="item.ticketType ==='退车申请' && item.ticketStatus==='申请'">
              <v-icon size="16" class="success--text">mdi-car-wrench</v-icon>新增违章单
            </span>
            <span role="button" class="success--text font-weight-medium font-size-2" @click="doUiAction('handleCarRequest', {item, actionType: '处理'})" v-if="item.ticketStatus==='申请'">
              <v-icon size="16" class="success--text">mdi-check-circle-outline</v-icon>处理
            </span>
            <span role="button" class="success--text font-weight-medium font-size-2" v-else>
              完成
            </span>
          </template>
          <!-- 没有数据 -->
          <template v-slot:loading>
            <div class="jh-no-data">数据加载中</div>
          </template>
          <template v-slot:no-data>
            <div class="jh-no-data">暂无数据</div>
          </template>
          <template v-slot:no-results>
            <div class="jh-no-data">暂无数据</div>
          </template>
          <template v-slot:item.ticketStatus="{ item }">
            <v-chip dark x-small :color="getApplyStatusColor(item.ticketStatus)">
              {{item.ticketStatus}}
            </v-chip>
          </template>
          <!-- 表格分页 -->
          <template v-slot:footer.page-text="pagination">
            <span>{{pagination.pageStart}}-{{pagination.pageStop}}</span>
            <span class="ml-1">共{{pagination.itemsLength}}条</span>
          </template>
        </v-data-table>
      </v-card>
      <!-- 新增违章单抽屉 -->
      <v-navigation-drawer v-if="isCreateViolationDrawerShown" v-model="isCreateViolationDrawerShown" :permanent="isCreateViolationDrawerShown" fixed temporary right width="80%" class="elevation-24">
        <v-form ref="createForm" lazy-validation>
          <!-- 抽屉标题 -->
          <v-row>
            <span class="text-subtitle-1 font-weight-medium pa-6 pl-7">新增信息</span>
          </v-row>
          <!-- 抽屉表单 -->
          <!-- <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.xxxId" :rules="validationRules.requireRules"></v-text-field> -->
          <v-row class="mt-0 px-4">
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">车牌号</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.carNumber"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">车辆编号</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.carId"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">客户编号（用车单位）</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.customerId"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">违章时间</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.violationTime"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">违章地点</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.violationLocation"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">违章项目</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.violationDescription"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">扣分</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.deductPoint"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">罚款</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.violationFine"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">项目负责人</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.projectLeader"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">违章人（司机/单位）</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.violator"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">用车单位</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.carUsingUnit"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">违章人联系电话</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="violationItem.violatorPhone"></v-text-field>
            </v-col>
             
          </v-row>

          <!-- 抽屉操作按钮 -->
          <v-row class="justify-end mx-0 mt-8 px-6">
            <v-btn color="success" @click="doUiAction('createViolationItem')" small>保存</v-btn>
            <v-btn class="elevation-0 ml-2" @click="isCreateViolationDrawerShown = false" small>取消</v-btn>
          </v-row>
        </v-form>
        <!-- 抽屉关闭按钮 -->
        <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn" @click="isCreateViolationDrawerShown = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-navigation-drawer>

      <!-- 新增维修单抽屉 -->
      <v-navigation-drawer v-if="isCreateRepairDrawerShown" v-model="isCreateRepairDrawerShown" :permanent="isCreateRepairDrawerShown" fixed temporary right width="80%" class="elevation-24">
        <v-form ref="createForm" lazy-validation>
          <!-- 抽屉标题 -->
          <v-row>
            <span class="text-subtitle-1 font-weight-medium pa-6 pl-7">新增信息</span>
          </v-row>
          <!-- 抽屉表单 -->
          <v-row class="mt-0 px-4">

            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">车辆编号</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.carId"></v-text-field>
            </v-col>

            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">车牌号</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.carNumber"></v-text-field>
            </v-col>
              
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">维修里程</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.repairMileage"></v-text-field>
            </v-col>
              
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">维修日期</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.repairDate"></v-text-field>
            </v-col>
              
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">维修类型(故障维修/事故维修)</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.repairType"></v-text-field>
            </v-col>
              
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">维修原因</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.repairReason"></v-text-field>
            </v-col>
              
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">维修项目描述</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.repairDescription"></v-text-field>
            </v-col>
              
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">维修费用</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.repairExpenses"></v-text-field>
            </v-col>
              
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">维修厂</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.repairShop"></v-text-field>
            </v-col>
              
          </v-row>

          <!-- 抽屉操作按钮 -->
          <v-row class="justify-end mx-0 mt-8 px-6">
            <v-btn color="success" @click="doUiAction('createRepairItem')" small>保存</v-btn>
            <v-btn class="elevation-0 ml-2" @click="isCreateRepairDrawerShown = false" small>取消</v-btn>
          </v-row>
        </v-form>
        <!-- 抽屉关闭按钮 -->
        <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn" @click="isCreateRepairDrawerShown = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-navigation-drawer>

      <!-- 处理发车/退车请求抽屉 -->
      <v-navigation-drawer v-model="isDispatchDrawerShow" :permanent="isDispatchDrawerShow" fixed temporary right width="80%" hide-overlay class="elevation-24">
        <v-form ref="form" lazy-validation>
          <v-row :class="{'px-10': !isMobile, 'px-3': isMobile, 'pb-7': isMobile}" v-if="isDispatchDrawerShow">
            <!-- <v-col cols="12" sm="12" md="12" xl="12" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
              <span class="inputLabel">验车照片</span>
              <v-file-input v-model="inputFile" class="jh-v-input mr-2" dense filled single-line chips label="请选择文件" ></v-file-input>
            </v-col> -->
            <v-col cols="12" sm="12" md="4" xl="3" :class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
              <span class="inputLabel">合同Id</span>
              <v-text-field class="jh-v-input " dense filled single-line v-model="dispatchItem['contractId']"></v-text-field>
            </v-col> 
            <v-col cols="12" sm="12" md="4" xl="3" :class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
              <span class="inputLabel">车辆Id</span>
              <v-text-field class="jh-v-input " dense filled single-line v-model="dispatchItem['carId']"></v-text-field>
            </v-col> 
            <v-col cols="12" sm="12" md="4" xl="3" :class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
              <span class="inputLabel">车牌号</span>
              <v-text-field class="jh-v-input " dense filled single-line v-model="dispatchItem['carNumber']"></v-text-field>
            </v-col> 
            <v-col cols="12" sm="12" md="4" xl="3" :class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
              <span class="inputLabel">发车/退车地点</span>
              <v-text-field class="jh-v-input " dense filled single-line v-model="dispatchItem['dispatchLocation']"></v-text-field>
            </v-col> 
            
            <v-col cols="12" sm="12" md="4" xl="3" :class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
              <span class="inputLabel">目前公里数</span>
              <v-text-field class="jh-v-input " dense filled single-line v-model="dispatchItem['currentKilometers']"></v-text-field>
            </v-col> 

            <v-col cols="12" sm="12" md="4" xl="3" :class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
              <span class="inputLabel">车辆发车/退车</span>
              <v-select class="jh-v-input " dense filled single-line v-model="dispatchItem['dispatchStatus']" :items="['发车','退车']"></v-select>
            </v-col> 
            <v-col cols="12" sm="12" md="4" xl="3" :class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
              <span class="inputLabel">发车/退车燃油量(L)</span>
              <v-text-field class="jh-v-input " dense filled single-line v-model="dispatchItem['dispatchFuel']"></v-text-field>
            </v-col> 
            <v-col cols="12" sm="12" md="12" xl="12" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
              <span class="inputLabel">验车照片</span>
              <!-- <v-file-input v-model="inputFile" class="jh-v-input mr-2" dense filled single-line chips label="请选择文件" ></v-file-input> -->
              <custom-upload ref="customUpload"  multiple @on-upload="handleUpload"></custom-upload>
            </v-col> 
          </v-row>
          <v-row class="mx-0 justify-end mt-4" :class="{'px-4': isMobile, 'px-6': !isMobile, 'mb-8': isMobile}">
            <v-btn color="success" @click="doUiAction('dispatchCar')" small>保存</v-btn>
            <v-btn class="elevation-0 ml-2" @click="isDispatchDrawerShow = false" small>取消</v-btn>
          </v-row>
        </v-form>
        <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn" @click="isDispatchDrawerShow = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-navigation-drawer>

      <!-- 编辑抽屉 -->
      <v-navigation-drawer v-if="isUpdateDrawerShown" v-model="isUpdateDrawerShown" :permanent="isUpdateDrawerShown" fixed temporary right width="80%" class="elevation-24">
        <v-form ref="updateForm" lazy-validation>
          <!-- 抽屉标题 -->
          <v-row>
            <span class="text-subtitle-1 font-weight-medium pa-6 pl-7">修改信息</span>
          </v-row>
          <!-- 抽屉表单 -->
          <v-row class="mt-0 px-4">
            <!-- <v-text-field class="jh-v-input" dense single-line filled v-model="updateItem.xxxId" :rules="validationRules.requireRules"></v-text-field> -->
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">自增ID</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="updateItem.idSequence"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">工单ID</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="updateItem.ticketId"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">合同ID</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="updateItem.contractId"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">工单类型</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="updateItem.ticketType"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">工单描述</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="updateItem.ticketDesc"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">申请内容</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="updateItem.ticketContentRequest"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">完成内容</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="updateItem.ticketContent"></v-text-field>
            </v-col>
             
            <v-col cols="12" sm="12" md="4">
              <span class="jh-input-label">总金额</span>
              <v-text-field class="jh-v-input" dense single-line filled v-model="updateItem.ticketAmount"></v-text-field>
            </v-col>
             

          </v-row>
          <!-- 抽屉操作按钮 -->
          <v-row class="justify-end mx-0 mt-8 px-6">
            <v-btn color="success" @click="doUiAction('updateItem')" small>保存</v-btn>
            <v-btn class="elevation-0 ml-2" @click="isUpdateDrawerShown = false" small>取消</v-btn>
          </v-row>
        </v-form>
        <!-- 抽屉关闭按钮 -->
        <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn" @click="isUpdateDrawerShown = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-navigation-drawer>
      <!-- <<<<<<<<<<<<< 页面内容 -->

      <carActionRequest-handle ref="handleCarRequest" @success="doUiAction('getTableData')" />
    </div>

    <!-- 帮助页抽屉 >>>>>>>>>>>>> -->
    <v-navigation-drawer v-if="isHelpPageDrawerLoaded" v-model="isHelpPageDrawerShown" :permanent="isHelpPageDrawerShown" fixed temporary right width="80%" class="elevation-24">
      <iframe style="border: 0" :src="`/${appInfo.appId}/pageDoc#404.md`" width="100%" height="100%"></iframe>
      <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn" @click="isHelpPageDrawerShown = false">
        <v-icon>mdi-close</v-icon>
      </v-btn>
    </v-navigation-drawer>
    <!-- <<<<<<<<<<<<< 帮助页抽屉 -->

  </v-main>
</v-app>

<jh-toast />
<jh-mask />
<jh-confirm-dialog />
</div>
</script>

<div id="app">
</div>

{% endblock %}

{% block vueScript %}

{% include 'common/jianghuJs/fixedTableHeightV4.html' %}
{% include 'filter/vueFilters.html' %}
{% include 'component/upload/custom-upload.html' %}

{% include 'component/ticket/carActionRequest-handle.html' %}
<script type="module">
  new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: () => ({
      // 违章信息
      violationItem: {},
      isCreateViolationDrawerShown: false,
      // 处理按钮
      dispatchItem: {},
      isDispatchDrawerShow: false,
      // 面包屑
      breadcrumbs: [
        {
          text: '首页',
          disabled: true,
        },
        {
          text: '车辆发车/退车申请单',
          disabled: true,
        }
      ],
      isHelpPageDrawerShown: false,
      isHelpPageDrawerLoaded: false,
      isMobile: window.innerWidth < 500,
      // 表格相关数据
      isTableZebraLineShown: true,
      validationRules: {
        requireRules: [
          v => !!v || 'This is required',
        ],
      },
      // 下拉选项
      constantObj: {
        searchType: ['发车申请', '退车申请'],
        ticketStatus: [
          { text: '全部', value: null },
          { text: '申请', value: '申请' },
          { text: '完成', value: '完成' },
        ]
      },
      serverSearchInput: {
        ticketStatus: '申请'
      },
      searchInput: null,
      isTableLoading: true,
      tableData: [],
      headers: [
        { text: '操作', value: 'action', align: 'center', sortable: false, width: 120, class: 'fixed', cellClass: 'fixed' },
        { text: "工单ID", value: "ticketId", width: 120 },
        { text: "合同ID", value: "ticketBizId", width: 120 },
        { text: "工单类型", value: "ticketType", width: 120 },
        { text: "工单状态", value: "ticketStatus", width: 120 },
        { text: "申请内容", value: "ticketRequestName", width: 120 },
        { text: "工单描述", value: "ticketDesc", width: 120 },
        // { text: "完成内容", value: "ticketContent", width: 120 },
        { text: "总金额", value: "ticketAmount", width: 120 },
        { text: "申请时间", value: "ticketRequestAt", width: 120 },
        { text: "申请人Id", value: "ticketRequestByUserId", width: 120 },
        { text: "申请人", value: "ticketRequestByUser", width: 120 },
        // { text: "filePath", value: "filePath", width: 120 },
        { text: "操作者", value: "operationByUser", width: 120 },
        { text: "操作时间", value: "operationAt", width: 250 },
      ],

      isCreateRepairDrawerShown: false,
      createItem: {},
      createActionData: {},
      isUpdateDrawerShown: false,
      updateItem: {},
      updateItemId: null,
      updateActionData: {},
      deleteItem: {},
      deleteItemId: null,
      // 处理发车/退车的文件上传
      inputFile: null,
      downloadPrefix: `${window.location.origin}/<$ ctx.app.config.appId $>/upload`,
      overlay: false,
      fileType: '',
      fileSrc: '',
      previewPrefix: `/<$ ctx.app.config.appId $>/upload`,

      // 批量
      tableSelected: [],

    }),
    watch: {
      isHelpPageDrawerShown(val) {
        if (val && !this.isHelpPageDrawerLoaded) {
          this.isHelpPageDrawerLoaded = true;
        }
      },
    },
    async created() {
    },
    mounted() {
      this.doUiAction('getTableData');
    },
    methods: {
      async doUiAction(uiActionId, uiActionData) {
        switch (uiActionId) {
          // 处理按钮
          case 'handleCarRequest':
            await this.prepareDoHandleItem(uiActionData);
            await this.prepareHandleValidate();
            await this.doHandleItem();
            break;
          case 'getTableData':
            await this.getTableData();
            break;
          case 'startCreateViolationItem':
            await this.prepareCreateFormData(uiActionData);
            await this.openCreateViolationDrawer();
            break;
          case 'createViolationItem':
            await this.prepareCreateValidate();
            await this.confirmCreateItemDialog();
            await this.doCreateViolationItem();
            await this.closeCreateViolationDrawer();
            await this.getTableData();
            break;
          case 'startCreateRepairItem':
            await this.prepareCreateFormData(uiActionData);
            await this.openCreateDrawer();
            break;
          case 'createRepairItem':
            await this.prepareCreateValidate();
            await this.confirmCreateItemDialog();
            await this.prepareDoCreateItem();
            await this.doCreateRepairItem();
            // 新增维修后修改车辆状态为“维修中”
            await this.doUpdateCarOperationStatus();
            await this.closeCreateDrawer();
            await this.updateCarStatus();
            break;
          case 'startUpdateItem':
            await this.prepareUpdateFormData(uiActionData);
            await this.openUpdateDrawer();
            break;
          case 'updateItem':
            await this.prepareUpdateValidate();
            await this.confirmUpdateItemDialog();
            await this.prepareDoUpdateItem();
            await this.doUpdateItem();
            await this.closeUpdateDrawer();
            await this.getTableData();
            break;
          case 'deleteItem':
            await this.prepareDeleteFormData(uiActionData);
            await this.confirmDeleteItemDialog();
            await this.prepareDoDeleteItem();
            await this.doDeleteItem();
            await this.clearDeleteItem();
            await this.getTableData();
            break;
          default:
            console.error("[doUiAction] uiActionId not find", { uiActionId });
            break;
        }
      },
      // ---------- 处理申请单 doUiAction >>>>>>>>>>>>> ----------
      async prepareDoHandleItem(funData) {
        const { item, actionType } = funData;
        const ticketList = item ? [item] : this.tableSelected;
        this.handleTicketList = ticketList;
        this.handleActionType = actionType;
        this.handleTicketIds = _.map(ticketList, 'ticketId');
      },
      async prepareHandleValidate() {
        const { handleTicketList } = this;
        if (handleTicketList.length === 0) {
          window.vtoast.fail(`请选择单据`);
          throw new Error("请选择单据");
        }
        if (_.find(handleTicketList, item => item.ticketType !== handleTicketList[0]['ticketType'])) {
          window.vtoast.fail(`需选择单据类型一致的数据`);
          throw new Error("需选择单据类型一致的数据");
        }
        if (this.handleActionType === '处理' && _.find(handleTicketList, item => _.includes(['完成', '拒绝'], item.ticketStatus))) {
          window.vtoast.fail(`不能选择【完成、拒绝】的单据`);
          throw new Error("不能选择【完成、拒绝】的单据");
        }
      },
      async doHandleItem() {
        const { handleTicketList, handleTicketIds, handleActionType } = this;
        const ticketType = handleTicketList[0]['ticketType'];
        this.isTableLoading = true;
        switch (ticketType) {
          case '发车申请':
          case '退车申请':
            await this.$refs.handleCarRequest.doUiAction('startUpdateItem', { ticketIds: handleTicketIds, actionType: handleActionType, ticketType });
            break;
          default:
            console.error("[openHandleItem] ticketType not find", { item });
            break;
        }
        this.isTableLoading = false;
      },

      // ---------- <<<<<<<<<<<<< 处理申请单 doUiAction ----------
      _extractRequestNames(ticketContentRequest) {
        // const ticketRequestName = ticketContentRequest.map(row => {
        //   return row.carNumber;
        // })
        // return ticketRequestName;
      },
      getApplyStatusColor(status) {
        switch (status) {
          case '申请':
            return 'blue';
          case '完成':
            return 'green';
        }
      },
      async doCreateViolationItem() {
        await window.jhMask.show();
        await window.vtoast.loading("新增数据");
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'violationManagement',
              actionId: 'insertItem',
              actionData: { ...this.violationItem },
              idGenerate: {
                type: "idSequence",
                prefix: "WZ",
                bizId: "violationId",
                tableName: "violation",
              }
            }
          }
        })
        await window.jhMask.hide();
        await window.vtoast.success("新增数据成功");
      },
      async openCreateViolationDrawer() {
        this.isCreateViolationDrawerShown = true;
      },
      async closeCreateViolationDrawer() {
        this.isCreateViolationDrawerShown = false;
      },
      async updateCarStatus() {
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'basicManagement',
              actionId: 'updateItem',
              where: { carId: this.createActionData.carId },
              actionData: {
                operationStatus: '不可用',
                notOperationReason: '维修中'
              }
            }
          }
        })
      },
      async closeDispatchDrawer() {
        this.isDispatchDrawerShow = false;
      },

      async prepareDispatchFormData(data) {
        const obj = _.cloneDeep(data)
        const { ticketBizId, ticketId, ticketType } = obj;
        this.dispatchItem['contractId'] = ticketBizId;
        this.dispatchItem['ticketType'] = ticketType
        this.dispatchItem['ticketId'] = ticketId
        // const rows = (await window.jianghuAxios({
        //   data: {
        //     appData: {
        //       pageId: "contractManagement",
        //       actionId: "selectItemList",
        //       where: { contractId }
        //     }
        //   }
        // })).data.appData.resultData.rows[0];

        // 解析ticketContentRequest
        const ticketContentRequest = JSON.parse(obj.ticketContentRequest);
        const { carId, carNumber, dispatchFuel, currentKilometers } = ticketContentRequest[0]
        this.dispatchItem['carId'] = carId;
        this.dispatchItem['carNumber'] = carNumber;
        this.dispatchItem['carNumber'] = carNumber;
        this.dispatchItem['dispatchFuel'] = dispatchFuel;
        this.dispatchItem['currentKilometers'] = currentKilometers;
        if (obj.ticketType === "发车申请") {
          this.dispatchItem['dispatchStatus'] = "发车"
        } else {
          this.dispatchItem['dispatchStatus'] = "退车"
        }
      },
      // 点击发车按钮，保存到发车表
      async doDispatchCar() {
        await window.vtoast.loading("保存中");

        // debugger
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'carDispatchManagement',
              actionId: 'insertItem',
              actionData: {
                ...this.dispatchItem,
                // filePath: downloadPath,
              },
              idGenerate: {
                type: "idSequence",
                prefix: "CD",
                bizId: "dispatchId",
                tableName: "dispatch",
              }
            }
          }
        })
        // const fileDesc = this.createItem.fileDesc;
        // const file = this.inputFile
        // window.vtoast.loading(`${file.name} 上传进度: 0.00%`);
        // // FIXME:此处必须上传合同文件才能新增
        // const result = await window.jianghuAxios.httpUploadByStream({
        //   fileDesc,
        //   file,
        //   fileDirectory: 'testFile',
        //   onProgress: (total, loaded) => {
        //     const progress = Number((loaded * 100 / total).toFixed(2));
        //     window.vtoast.loading(`${file.name} 上传进度: ${progress}%`);
        //     if (loaded === total) {
        //       window.vtoast.success(`${file.name} 上传进度: 100%`);
        //     }
        //   }
        // })
        // const { status } = result.data;
        // const { downloadPath } = result.data.appData.resultData;
        // if (status === 'success') {
        //   await window.jianghuAxios({
        //     data: {
        //       appData: {
        //         pageId: 'carDispatchManagement',
        //         actionId: 'insertItem',
        //         actionData: {
        //           ...this.dispatchItem,
        //           filePath: downloadPath,
        //         },
        //         idGenerate: {
        //           type: "idSequence",
        //           prefix: "CD",
        //           bizId: "dispatchId",
        //           tableName: "dispatch",
        //         }
        //       }
        //     }
        //   })
        //   await window.vtoast.success("新增数据成功");
        // } else {
        //   await window.vtoast.fail("文件上传失败");
        // }

      },

      async openDispatchDrawer() {
        this.isDispatchDrawerShow = true;
      },

      /**
       * 获取表格数据
       */
      async getTableData() {
        this.isTableLoading = true;
        const backendSearchData = _.pickBy(this.serverSearchInput, (fieldValue, fieldKey) => {
          if (fieldValue !== null && fieldValue !== '') {
            return true;
          }
        });
        // 从serverSearchInput拿到当前是申请/完成，如果是完成，则加上表格头的字段
        if (this.serverSearchInput.ticketStatus === '完成') {
          this.headers.push([
            { text: "处理时间", value: "ticketStatusAt", width: 120 },
            { text: "处理描述", value: "ticketStatusDesc", width: 120 },
            { text: "处理人Id", value: "ticketStatusByUserId", width: 120 },
            { text: "处理人", value: "ticketStatusByUser", width: 120 }
          ])
        }

        const whereIn = _.pickBy({
          ticketType: ['发车申请', '退车申请'],
        }, _.identity)

        const rows = (await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'ticketManagement',
              actionId: 'selectItemList',
              actionData: {},
              where: backendSearchData,
              whereIn,
              orderBy: [{ column: 'operationAt', order: 'desc' }]
            }
          }
        })).data.appData.resultData.rows;
        this.tableData = rows.map(row => {
          const ticketContentRequest = JSON.parse(row.ticketContentRequest)
          row.ticketRequestName = this._extractRequestNames(ticketContentRequest)
          return row
        });
        this.isTableLoading = false;
      },
      // ---------- 新增数据 uiAction >>>>>>>>>> --------
      async prepareCreateFormData(uiActionData) {
        this.createItem = {};
        this.violationItem = {};
        // 根据ticket表中的合同id，获取车辆id、车牌号和客户id
        const rows = (await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'contractManagement',
              actionId: 'selectItemList',
              actionData: {},
              where: { contractId: uiActionData.contractId },
            }
          }
        })).data.appData.resultData.rows[0];
        this.createItem.carId = rows.carId;
        this.violationItem.carId = rows.carId;
        this.createItem.carNumber = rows.carNumber;
        this.violationItem.carNumber = rows.carNumber;
      },

      async openCreateDrawer() {
        this.isCreateRepairDrawerShown = true;
      },

      async prepareCreateValidate() {
        if (await this.$refs.createForm.validate()) {
          return true;
        }
        throw new Error("请完善表单信息")
      },

      async confirmCreateItemDialog() {
        if (await window.confirmDialog({ title: "新增", content: "确定新增吗？" }) === false) {
          throw new Error("[confirmCreateFormDialog] 否");
        }
      },

      prepareDoCreateItem() {
        const { id, ...data } = this.createItem;
        this.createActionData = data;
      },

      async doCreateRepairItem() {
        await window.jhMask.show();
        await window.vtoast.loading("新增数据");
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'repairManagement',
              actionId: 'insertItem',
              actionData: this.createActionData,
              idGenerate: {
                type: "idSequence",
                prefix: "WX",
                bizId: "repairId",
                tableName: "repair",
              }
            }
          }
        })
        await window.jhMask.hide();
        await window.vtoast.success("新增数据成功");
      },
      async doUpdateCarOperationStatus() {
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'basicManagement',
              actionId: 'updateItem',
              actionData: { operationStatus: "不可用", notOperationReason: "已签约" },
              where: { carId: this.createActionData.carId }
            }
          }
        })
      },
      async closeCreateDrawer() {
        this.isCreateRepairDrawerShown = false;
        this.createItem = {};
        this.createActionData = null;
      },
      // ---------- <<<<<<<<<<< 新增数据 uiAction ---------
      // ---------- 修改数据 uiAction >>>>>>>>>>>> --------
      async prepareUpdateFormData(funObj) {
        this.updateItem = _.cloneDeep(funObj);
      },

      async openUpdateDrawer() {
        this.isUpdateDrawerShown = true;
      },

      async prepareUpdateValidate() {
        if (await this.$refs.updateForm.validate()) {
          return true;
        }
        throw new Error("请完善表单信息")
      },

      async confirmUpdateItemDialog() {
        if (await window.confirmDialog({ title: "修改", content: "确定修改吗？" }) === false) {
          throw new Error("[confirmUpdateItemDialog] 否");
        }
      },

      async prepareDoUpdateItem() {
        const { id, ...data } = this.updateItem;
        this.updateItemId = id;
        this.updateActionData = data;
      },

      async doUpdateItem() {
        await window.jhMask.show();
        await window.vtoast.loading("修改数据");
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'ticketManagement',
              actionId: 'updateItem',
              actionData: this.updateActionData,
              where: { id: this.updateItemId }
            }
          }
        })

        await window.jhMask.hide();
        await window.vtoast.success("修改数据成功");
      },

      async closeUpdateDrawer() {
        this.isUpdateDrawerShown = false;
        this.updateItem = {};
        this.updateActionData = null;
        this.updateItemId = null;
      },
      // ---------- <<<<<<<<<<< 修改数据 uiAction ---------
      // ---------- 删除数据 uiAction >>>>>>>>>>>> --------
      async prepareDeleteFormData(funObj) {
        this.deleteItem = _.cloneDeep(funObj);
      },
      async confirmDeleteItemDialog() {
        if (await window.confirmDialog({ title: "删除", content: "确定删除吗？" }) === false) {
          throw new Error("[confirmDeleteItemDialog] 否");
        }
      },
      async prepareDoDeleteItem() {
        const { id } = this.deleteItem;
        this.deleteItemId = id;
      },
      async doDeleteItem() {
        await window.vtoast.loading("删除数据");
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'ticketManagement',
              actionId: 'deleteItem',
              actionData: {},
              where: { id: this.deleteItemId }
            }
          }
        });
        await window.vtoast.success("删除数据成功");
      },
      async clearDeleteItem() {
        this.deleteItem = {};
        this.deleteItemId = null;
      },
      // ---------- <<<<<<<<<<< 删除数据 uiAction ---------
      handleUpload(file) {
        console.log("file", file);
      },

      // ---------- table selected >>>>>>>>>>>> --------
      tableItemSelected({ item, value }) {
        if (value) {
          this.tableSelected.push(item);
        } else {
          this.tableSelected = _.reject(this.tableSelected, ['ticketId', item.ticketId]);
        }
      },
      tableToggleSelectAll({ items, value }) {
        if (value) {
          this.tableSelected = items;
        } else {
          this.tableSelected = [];
        }
      },
      // ---------- <<<<<<<<<<< table selected  --------
    }
  })
</script>

<style scoped="">
</style>{% endblock %}